//定义一个放大镜类
//表示类的函数 约定俗成 首字母大写
// function Person() {
//   var obj = {}; //省略了
//   obj.name = name;
//   obj.age = age;
//   return obj; //省略了
// }

//new运算符
//.一般情况下回遵循设计原则  单一原则  颗粒度小 灵活性强
//函数大(逻辑臃肿)
//程雪不够优雅

function Enlarge(showEle, bigArea, mask, listEle) {
  //定义放大镜的属性
  this.showEle = showEle;
  this.bigArea = bigArea;
  this.mask = mask;
  this.listEle = listEle;
  this.enterFn();
  this.leaveFn();
  this.moveFn();
  this.switchPic();
}

// 定义放大镜的方法
//鼠标移入放大区域的时候需要做的逻辑
Enlarge.prototype.enterFn = function () {
  var that = this;
  this.showEle.onmouseenter = function () {
    //显示遮罩层
    that.mask.style.display = "block";
    that.bigArea.style.display = "block";
  };
};

//鼠标移出放大区域的时候需要做的逻辑
Enlarge.prototype.leaveFn = function () {
  var that = this;
  this.showEle.onmouseleave = function () {
    that.mask.style.display = "none";
    that.bigArea.style.display = "none";
  };
};

//放大镜的移动方法
Enlarge.prototype.moveFn = function () {
  //在showEle上移动的时候遮罩层随鼠标移动
  var that = this;
  this.showEle.onmousemove = function (e) {
    var x =
      e.clientX - this.getBoundingClientRect().left - that.mask.offsetWidth / 2; //减去遮罩层一半的距离
    // console.log(e.clientX, this.getBoundingClientRect().left, x);
    var y =
      e.clientY - this.getBoundingClientRect().top - that.mask.offsetHeight / 2;
    // console.log(this.offsetWidth - that.mask.offsetWidth);

    //限定移动范围
    if (x <= 0) {
      x = 0;
    }
    if (x > this.offsetWidth - that.mask.offsetWidth) {
      //遮罩层x轴能移动的距离只有从左上原点开始到右上原点碰到边框结束  也就是一个大边框减去小边框的距离
      x = this.offsetWidth - that.mask.offsetWidth;
    }
    if (y <= 0) {
      y = 0;
    }
    if (y > this.offsetHeight - that.mask.offsetHeight) {
      //遮罩层y轴能移动的距离只有从左上原点开始到左上原点碰到边框结束  也就是一个大边框减去小边框的距离
      y = this.offsetHeight - that.mask.offsetHeight;
    }

    //遮罩层移动的时候大图跟随移动
    // x / showEle.offsetWidth = ?/背景图的宽度;//遮罩层比上中图的比例  对上 求得值比上背景图大小
    //获取背景图的宽高
    var size = getComputedStyle(that.bigArea)["background-size"];
    // console.log(size);
    var arr = size.split(" ");
    var w = parseInt(arr[0]);
    var h = parseInt(arr[1]); //获取到背景图的宽高
    var xx = (x / this.offsetWidth) * w; // 背景图的偏移量
    var yy = (y / this.offsetHeight) * h;
    //设置大图的偏移量为xx yy
    that.bigArea.style.backgroundPosition = `-${xx}px -${yy}px`;

    //
    that.mask.style.left = x + "px";
    that.mask.style.top = y + "px";
  };
};

//点击切换放大图
Enlarge.prototype.switchPic = function () {
  var that = this;
  var ps = this.listEle.querySelectorAll("p");
  ps.forEach(function (item, k) {
    item.onclick = function () {
      ps.forEach(function (val, kk) {
        if ((kk = k)) {
          val.classList.add("acitve");
        } else {
          val.classList.remove("active");
        }
      });
      // console.log(k);
      //切换图像
      that.showEle.querySelector("img").src = `./imgs/${k + 1}.big.jpg`;
      that.bigArea.style.backgroundImage = `url(./imgs/${k + 1}.big.jpg)`;
    };
  });
};
